<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>chpro</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<style type="text/css">
p {
    margin:5px;
}
.settings {
    background-image:url(images/icons/fam/folder_wrench.png);
}
.nav {
    background-image:url(images/icons/fam/folder_go.png);
}
.info {
    background-image:url(images/icons/fam/information.png);
}
</style>
<script type="text/javascript" src="js/bootstrap.js"></script>
 <script type="text/javascript">
	Ext.onReady(function(){
		//树1
		 var tree = Ext.create('Ext.tree.Panel',{
	        	title:'财务管理',
	        	iconCls: 'nav',	//设置图标
      	        root:{
      	        	text:'树根',
	       	        expanded:true,		//默认展开根节点
	      	        children:[
	       	                   {
	       	                	   id:'1',
	       	                	   text:'帐号管理',
	       	                	   leaf:true	//true说明为叶子节点
	       	                   },{
	       	                	   id:'2',
	       	                	   text:'日常管理',
	       	                	   leaf:true	//true说明为叶子节点
	       	                   },{
	       	                	   id:'3',
	       	                	   text:'支出管理',
	       	                	   leaf:true	//true说明为叶子节点
	       	                   },{
	       	                	   id:'4',
	       	                	   text:'收入管理',
	       	                	   leaf:true	//true说明为叶子节点
	       	                   }
	       	        ] 
      	        	
      	        },
      	      listeners:{
      	    	  'itemclick':function(view,record){
      	    		  //如果单击的节点为子节点
      	    		  if(record.get('leaf')){
      	    			var id = record.get('id');
      	    			var text = record.get('text');
      	    			//alert(id+' '+text+' '+displayField);
      	    			  
      	    			var tabPanel = Ext.getCmp('MAINPANEL');
      	    			 
      	    			var tab = tabPanel.getComponent(id);
      	    			if(!tab){
      	    				tabPanel.add({id:id,title:text,html:text,closable:true}).show();
      	    			}
      	    			  
      	    			tabPanel.setActiveTab(tab);
      	    		  }
      	    	  }
      	      }
		});
		
		
		Ext.create('Ext.container.Viewport',{
			title:'项目主页',
			layout:'border',	//边框布局
			//height:250,
			//width:400,
			frame:true,
			renderTo:Ext.getBody(),
			defaults:{	//设置默认属性
				collapsible:true
			},
			items:[
			       Ext.create('Ext.Component', {
		                region: 'north',
		                height: 32, // give north and south regions a height
		                autoEl: {
		                    tag: 'div',
		                    html:'<p>north - generally for menus, toolbars and/or advertisements</p>'
		                }
		           }),{
						region:'south',
		                contentEl:'south',
		                split: true,
		                height: 100,
		                minSize: 100,
		                maxSize: 200,
		                collapsible: true,
		                collapsed: true,
		                title: 'South',
		                margins: '0 0 0 0'
			   	   },{
			   		    title:'West Panel',
			   		    region:'west',	//指定子面板所在的区域为west
			   		    width:100,
						stateId: 'navigation-panel',
		                id: 'west-panel', // see Ext.getCmp() below
		                title: 'West',
		                split: true,
		                width: 200,
		                minWidth: 175,
		                maxWidth: 400,
		                collapsible: true,
		                animCollapse: true,
		                margins: '0 0 0 5',
			   		   layout:'accordion',	//折叠布局
			   		   items:[
							  tree
			   		          ,{
			   		        	  title:'嵌套面板二',
			   		        	  iconCls: 'settings',
			   		        	  html:'说明二'
			   		          },{
			   		        	  title:'嵌套面板三',
			   		        	  iconCls: 'info',
			   		        	  html:'说明三'
			   		          }
			   		   ]
			   		   
			   	   },{
			   		   title:'右边',
			   		   html:'右边',
			   		   region:'east',	//指定子面板所在的区域为east
			   		   width:100
			   	   },
			   		Ext.create("Ext.tab.Panel", {
			   			id:'MAINPANEL',
			   			region:'center',
						title: "Ext.tab.Panel示例",
						activeTab: 0, // 默认激活第一个tab页
						items: [{
							title: "主页",
							//autoLoad:'finance/otherAccount.html'
							html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+'http://localhost:8080/chpro/finance/otherAccount.html'+'"> </iframe>'
			   		    }]
			   	   })
			]
		});
		
	});
</script>
</head>
<body>
<div id="south" class="x-hide-display">
    <p>south - generally for informational stuff, also could be for status bar</p>
</div>
</body>
</html>